<template>
  <div id="app" :class="{moon:this.$store.getters.isMoon}">
    
    <nav-bar></nav-bar>

    <el-main>
      <transition mode="out-in">
        <keep-alive include="Home">
          <router-view />
        </keep-alive>
      </transition>
    </el-main>

    <footer-bar :list="list"></footer-bar>
    
    <back-top></back-top>
    
    <player v-show="playerShow"></player>
  </div>
</template>

<script>
import player from './components/audio'
import BackTop from 'components/content/BackTop.vue'
import NavBar from 'components/content/NavBar.vue'
import FooterBar from 'components/content/FooterBar.vue'
export default {
  components:{
    player,
    BackTop,
    NavBar,
    FooterBar
  },
  data() {
    return {
      list: [],
      about: {},
      screenHeight:0,
      playerShow:true
    };
  },
  methods: {
    async getFriendshipList() {
      const res = await this.$http.get("friendship");
      this.list = res.data;
    },
  },
  watch:{
    '$route':function(to,from){
      if(to.path=='/home'||to.path=='/timeline'||to.path=='/message'||to.path=='/about'||to.path.includes('/articleInfo')){
          this.playerShow=false
      }else{
          this.playerShow=true
      }
    }
  },
  created() {
    this.getFriendshipList();
    this.$store.commit("getIconTheme");
  }
};
</script>

<style lang="scss">
.v-enter {
  opacity: 0;
}
.v-leave {
  opacity: 1;
}
.v-enter-active {
  transition: opacity 0.5s;
}
.v-leave-active {
  opacity: 0;
  transition: opacity 0.5s;
}
// 黑暗主题样式
div.moon {
  background-color: black !important;
  .header {
    .el-menu-demo {
      background-color: black !important;
      .el-menu-item {
        color: #fff !important;
      }
      .el-menu-item:hover {
        background-color: #ccc;
      }
    }
  }
  .el-main {
    background-color: black !important;
  }
  .footer {
    background-color: black !important;
    .logo {
      cursor: pointer;
      i {
        color: #fff;
        font-size: 20px;
      }
      span {
        color: #fff;
        font-size: 18px;
        font-weight: 600;
        padding-left: 18px;
      }
    }
    p {
      color: #fff;
      a:hover {
        color: #fff !important;
      }
    }
  }
}
// pc端样式
@media screen and (min-width: 1200px) {
  #app {
    width: 100%; 
    // .el-backtop目标加上才会出现，原生不需要这个属性
    overflow-y: scroll;
  }
}

// 移动端样式
@media screen and (max-width: 768px) {
  #app {
    width: 100%;
    overflow-y: scroll;
  }
}
</style>
